<template>
    <div class="container">
      <h1>起名大师</h1>
      <form @submit.prevent="generateName">
        <div class="form-group">
          <label for="gender">性别:</label>
          <select id="gender" v-model="gender" class="custom-select">
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </div>
        <div class="form-group">
          <label for="birthdate">出生日期:</label>
          <input type="date" id="birthdate" v-model="birthdate" class="custom-input" />
        </div>
        <div class="form-group">
          <label for="preferences">特征:</label>
          <input type="text" id="preferences" v-model="preferences" class="custom-input" placeholder="请输入您的特征" />
        </div>
        <button type="submit" class="custom-button">生成名字</button>
      </form>
      <div v-if="name" class="result">
        <h2>推荐的名字:</h2>
        <p>{{ name }}</p>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import axios from 'axios';
  
  export default {
    setup() {
      const gender = ref('');
      const birthdate = ref('');
      const preferences = ref('');
      const name = ref('');
  
      const generateName = async () => {
        try {
          const response = await axios.post('http://127.0.0.1:8000/app/name/', {
            gender: gender.value,
            birthdate: birthdate.value,
            preferences: preferences.value
          });
          if (response.data.code === 200) {
            name.value = response.data.message;
          } else {
            alert('生成名字失败: ' + response.data.message);
          }
        } catch (error) {
          console.error('Error generating name:', error);
          alert('无法连接到服务器，请稍后再试。');
        }
      };
  
      return {
        gender,
        birthdate,
        preferences,
        name,
        generateName
      };
    }
  };
  </script>
  
  <style>
  body {
    font-family: 'Roboto', sans-serif;
    background-color: #f7f7f7;
    margin: 0;
    padding: 0;
  }
  
  .container {
    max-width: 500px;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
  }
  
  .custom-input, .custom-select {
    width: 75%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
    font-size: 14px;
    color: #333;
    background-color: #fff;
  }
  
  .custom-input:focus, .custom-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    outline: none;
  }
  
  .custom-input::placeholder {
    color: #aaa;
    font-weight: 300;
  }
  
  .custom-button {
    padding: 12px 25px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
    font-weight: bold;
  }
  
  .custom-button:hover {
    background-color: #0056b3;
  }
  
  .result {
    margin-top: 25px;
    font-size: 1.2em;
    color: #333;
  }
  
  h1 {
    color: #333;
    margin-bottom: 20px;
  }
  
  @media (max-width: 768px) {
    .container {
      margin: 20px auto;
    }
  }
  </style>